<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片环绕效果</title>
    <style>
        @keyframes boxMove{
            0%{transform: rotateY(0deg) rotateX(0)}
            12.5%{transform:rotateY(45deg) rotate(-30deg)}
            25%{transform:rotateY(90deg) rotate(-60deg)}
            37.5%{transform: rotateY(135deg) rotate(-30deg)}
            50%{transform: rotateY(180deg) rotate(0)}
            62.5%{transform: rotateY(225deg) rotate(30deg)}
            75%{transform: rotateY(270deg) rotate(60deg)}
            87.5%{transform: rotateY(315deg) rotate(30deg)}
            100%{transform: rotateY(360deg) rotate(0deg)}
        }
        /* @keyframes imgMove{
            0%{top:0;}
            12.5%{top:200px}
            25%{top:0}
            37.5%{top:-200px}
            50%{top:0}
            62.5%{top:200px}
            75%{top:0}
            87.5%{top:-200px}
            100%{top:0}
        } */
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 150px;
            height: 130px;
            position: relative;
            top:calc(50% - 75px);left: calc(50% - 65px);
            background: url(./images/a.gif);
            background-size: 150px 130px;
            transform-style: preserve-3d;
            transform: rotateX(30deg) rotateY(30deg);
            animation: boxMove 1s infinite;
        }
        .box img{
            width: 150px;
            height: 130px;
            position: absolute;
            transform-origin:0 0 0;
            /* animation:imgMove 3s infinite; */
        }
        .box img:hover{
            animation-play-state: paused;
        }
        .box img:nth-child(1){
            transform: translateZ(400px);
        }
        .box img:nth-child(2){
            transform: translateZ(283px) translateX(283px) rotateY(45deg);
        }
        .box img:nth-child(3){
            transform: translateX(400px) rotateY(90deg);
        }
        .box img:nth-child(4){
            transform: translateX(283px) translateZ(-283px) rotateY(135deg);
        }
        .box img:nth-child(5){
            transform: translateZ(-400px);
        }
        .box img:nth-child(6){
            transform: translateX(-283px) translateZ(-283px) rotateY(-135deg);
        }
        .box img:nth-child(7){
            transform: translateX(-400px) rotateY(-90deg);
        }
        .box img:nth-child(8){
            transform: translateX(-283px) translateZ(283px) rotateY(-45deg);
        }   
    </style>
</head>
<body style="background:url(./images/bj1.jpg) no-repeat; background-size: 100% 100%;">
    <div class="box">
        <img src="./images/pic1.png" alt="">
        <img src="./images/pic2.png" alt="">
        <img src="./images/pic3.png" alt="">
        <img src="./images/pic4.png" alt="">
        <img src="./images/pic5.png" alt="">
        <img src="./images/pic6.png" alt="">
        <img src="./images/pic7.png" alt="">
        <img src="./images/pic8.png" alt="">
    </div>
</body>
</html>